<template>
  <div class="mainWrap">
<!--    动画背景图-->
    <div class="mark"></div>
    <div class="main_banner d-flex justify-content-center align-items-center p_relative">
      <img class="p_relative" style="z-index: 1" src="~static/image/login_logo.png" width="1366" height="56">
<!--      <h1 class="ml-2">瑞斯康智慧照明管理平台</h1>-->
    </div>
    <!--退出-->
    <ul class="p_absolute d-flex justify-content-between mainTr" style="width:150px;top:30px;right: 25px;">
      <li><img src="~assets/image/main/user.png"><label>{{userInfo.userName}}</label></li>
      <li><img src="~assets/image/main/setting.png"><label>设置</label></li>
      <li @click="toPage({url:'login'})"><img src="~assets/image/main/logout.png"><label>注销</label></li>
    </ul>
<!--    模块-->
    <ul class="main_body p_relative" style="overflow: hidden;z-index: 2;">
      <li class="d-flex flex-column align-items-center justify-content-center" v-for="(item,index) in modules" :key="index"
          @mouseenter="moduleMouseOver(item)" @click="toPage(item)">
        <i class="iconfont" :class="'icon-'+item.icon"></i>
        <label class="mt-3">{{item.name}}</label>
      </li>
    </ul>
<!--    路灯背景-->
    <div class="poleBg p_absolute"></div>
<!--   鼠标 子菜单-->
    <transition name="el-zoom-in-center">
      <el-row class="submenu_group p_absolute " :gutter="20" v-show="submenus.length">
        <el-col class="submenu_item"  :span="12" v-if="submenus.length" v-for="(sub,index) in submenus" :key="index">{{sub.name}}</el-col>
      </el-row>
    </transition>
  </div>
</template>

<script>
  import api from 'api/api'
  import {mapState} from 'vuex'
  export default {
    components: {},
    props: {},
    data() {
      return {
        modules:[
          {id:6,name:'大屏监控',icon:'screen',url:'dashboard'},
          {id:4,name:'地图监控',icon:'gis',url:'map'},
          // {id:1,name:'数据统计',icon:'tongji',url:'dashboard2'},
          // {id:2,name:'运行管理',icon:'yunxing',url:'user'},
          {id:3,name:'系统维护',icon:'weihu',url:'work'},
          {id:7,name:'综合照明',icon:'weihu',url:'lightSystem'},
          // {id:5,name:'市场管理',icon:'market',url:''},

        ],
        submenus:[],
      }
    },
    watch: {},
    computed: {
      ...mapState({
        userInfo:state=>state.user.userInfo
      })
    },
    methods: {
      moduleMouseOver(item){
        let menus = this.global.menus;
        menus.map(menu=>{
          if(menu.id==item.id){
            this.submenus=menu.submenus||[]
          }
        })
      },
      toPage(item){
        if(item.name=="综合照明"){
          window.open('http://'+api.localhost+'/index.html')
        }else{
          this.$router.push(item.url)
        }
      }
    },
    created() {
    },
    mounted() {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .mainWrap {width: 100%;height:100%; background: url('~assets/image/main/main_bg.png') repeat;color :#fff;padding:100px 0 0;
    .mark{width: 337px;height: 363px;margin:0 auto; position: absolute; left: 100px;top: 0;background: url('~assets/image/main/img_0.png') no-repeat; background-size: 100% 100%;
      animation:mark-scale 3s linear infinite alternate}
    .main_banner{
      &::after{position:fixed;top:5px;content:url("~assets/image/login/guang.png");}
      h1{font-size:54px;letter-spacing:5px;ext-shadow: 6px 6px 8px 0px rgba(0,0,0,0.3);position:relative;z-index:2;}
    }
    .main_body{width:965px;margin:130px auto 0;
      li{
        float:left;margin-right:50px;margin-bottom:40px;width:203px;height:229px;background : url('~assets/image/main/btn02.png') no-repeat;background-size:100% 100%;cursor:pointer;
        &:nth-child(4n){margin-right:0;}
        &:hover{background : url('~assets/image/main/btn01.png') no-repeat;background-size:100% 100%;}
        i{font-size:64px;}
        label{color:#fff;font-size:22px;}
      }
    }
    .poleBg{width:409px;height:294px;transform:rotateY(180deg);
      background:url("~static/image/frame/frame_bg2.png") no-repeat;bottom:40px;left:10px;
    }
    .submenu_group{width:403px;height:252px;padding:30px 40px;background:url("~assets/image/main/submenu_bg.png") no-repeat;bottom:40px;right:25px;
      .submenu_item{font-size:20px;line-height:40px;font-weight:400;text-align:center;
        &::before{
          display:inline-block;content:'';width:15px;height:15px;background:#00FFFC;border-radius:100%;margin-right:10px;
        }
      }
    }
    .mainTr li{
     line-height:35px;font-weight:bold;width:40px;text-align:center;cursor:pointer;
     label{cursor:pointer;}
    }
  }
</style>
